<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
    <!--    引入路由文件-->
    <script src="../js/vue-router3.js"></script>
    <style>
        #nav {
            width: 100%;
            height: 80px;
            background-color: pink;
        }

        #nav h2 {
            float: left;
        }

        #nav p {
            float: right;
        }

        #show {
            width: 100%;
            height: 300px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
<!--
    路由的嵌套
-->
<div id="app">
    <!--路由出口设置-->
    <router-view></router-view>
</div>


<script>
    /*定义路由组件*/
    // 智能穿戴
    let smartWearables = {
        template: `
            <div>
                <div id="nav">
                    <h2>智能穿戴</h2>
                    <p>
                        <router-link to="/smart/earphone">耳机</router-link>
                        <router-link to="/smart/wear">穿戴</router-link>
                    </p>
                </div>
                <div id="show">
                    <router-view></router-view>
                </div>
            </div>
        `
    }

    // 耳机
    let earphone = {
        template: `
               <h2>耳机</h2>
        `
    }

    // 穿戴
    let wear = {
        template: `
               <h2>穿戴</h2>
        `
    }

    // 定义路由列表   路径和组件的映射关系
    let routes = [
        {
            path: '/smart',
            component: smartWearables,
            children: [
                {
                    path: 'earphone',   //    /smart/earphone
                    component: earphone
                },
                {
                    path: 'wear',
                    component: wear
                }
            ]
        }
    ]
    // 创建路由对象 router
    let router = new VueRouter({
        routes
    })

    let vm = new Vue({
        el: '#app',
        //     扩展vue的路由功能
        router
    })

</script>

</body>
</html>